HTML-5 Yapısal etiketler: Web Sitelerinin Anatomisi
HTML5 ile birlikte table design’ın geride bırakıldığını ve DIV yapısının kullanımının teşvik edildiğini söylemiştim. Unca da bu div elementlerini tanımlamak için ID ya da Class’lar tanımlanmaya başlandı. Çünkü HTML-5 CSS olmadan aslında bir hiçti ve css tanımlamaları için bu ID ya da Class lar gerekiyordu. HTML-5 geliştiricileri de bu durumu göz önüne alarak bu ID veya Class ları standartlaştırdılar. Ve bu şekilde hem arama motorları hem de Web Geliştiriciler için kolaylık haline gelmiş oldu.
Önceki makale de bahsettiğim gibi. Bu sayede arama motorlarına sitenin bölümlerini sanki bir emlakçının ev almak isteyen müşterisine tanıttığı gibi tanıtıyoruz. Ve müşteri de kendi kriterlerine göre bakmak istediği yerlerle daha özenli ilgileniyor.
HTML-5 e detaylı girmeden önce, html-5 in mantığını daha iyi anlamamız gerekiyor. Bunun içinde HTML-5 ile yapılan sitelerin anatomik yapısı hakkında bilgi sahibi olmamız gerek.
Yapısal Etiketlerin Kullanımı
Table Design kalktığına göre ve DIV (division) mantığı kullanılmaya başlandığına göre HTML-5 ile gelen bu yapısal etiketlerin ne olduğunu bir tablo ile beraber açıklamak gerekiyor.
Container nedir? : container denilen özellik çevreleyici anlamına geliyor ve genelde sitenin en dış div etiketini tanımlamak için kullanılıyor. Asıl amacı sayfadaki tüm elemanların çerçevesi olarak düşünülse ve çıkış amacı öyle olsa da sayfa içerisinde de kullanılıyor. Sayfa içerisinde kullanımı da bazı bölümleri gruplandırmak için olabiliyor. Örneğin içerik alanına gelecek olan div materyallerini class özelliği ile çevreleyebiliyor. class dedim çünkü ID olarak kullanıldığında sayfa da bir kere kullanılması tavsiye ediliyor çünkü ID’nin özelliği zaten benzersiz olmasıdır.
Header Nedir? : Bu kısım sitenin en üst kısmını tanımlar ve içerisine menü, logo gibi öğeler gelir.
Main Content Nedir? : Bu kısımda sitemizin içerik öğelerinin yerleştirildiği kısımdır. İçerisinde sayfalarımızda kullandığımız içerik yazıları bu yazılara bağlı olan sosyal medya paylaş butonları, yazar bilgileri gibi içerikleri alır.
Sidebar nedir? : Sayfalarımızda sağ ya da sol kısımda bulunan blokları ifade eder. Bu kısımda kategoriler, son yazılar, arşiv gibi bölümler listelenebilir.
Footer nedir? : Sitenin alt kısmını ifade eder. Bu kısmın asıl amacı site copyrigt bilgilerinin kullanılmasıdır fakat burada kategoriler, hakkımızda yazısının bir kısmı iletişim formu gibi bilgilerinde kullanıldığını görmekteyiz.
